<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib prefix="app" uri="/application" %>
<%@ taglib  prefix="s"  uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<link href="../css/css.css" rel="stylesheet" type="text/css" />
<link href="../css/dtree.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../scripts/dtreeAuth.js"></script>
<style type="text/css">
   .art_ul {}
   .art_ul li{padding:2px;display:block;overflow: hidden;border:1px solid #666;}
   .art_ul li img{width:120px;height:88px;}
   .art_ul div{float:left;padding:2px;}
   .content_main table td {text-align: left;}
   
   .main {width:800px;background: #fff;position: relative;top:0px;margin:0 auto;}
   .main .title{height:42px;}
   .main .photo{height:600px;text-align: center;vertical-align: middle;}
   .main .photo img{vertical-align: middle;}
   .main .desc{top:0px;height:50px;position: absolute;width:100%;background: #000;filter:alpha(Opacity=60);-moz-opacity:0.6;opacity: 0.6;}
   .main .text{top:0px;height:50px;position: absolute;width:100%;font-size:14px;color:#fff;line-height: 30px;padding-left:8px;}
</style>

</head>
<body>
<div id="all_main">
  <div class="head_main">
    <div class="main_nav">查看 ${art.realName } 的作品</div>
    <div class="main_soso">
    	
    </div>
    <div class="main_title" style="text-align: center;">
	     <input type="button" value="首张" onclick="WBPage.play(0)" />
	     <input type="button" value="上一张" onclick="WBPage.prew();" />
	     <input type="button" value="下一张" onclick="WBPage.next()" />
	     <input type="button" value="尾张" onclick="WBPage.last()" />
	            共<span id="totle"></span>张, 第<input  type="text" id="dijiz" value="" readonly style="width:10px;"/>张
	     
    </div>
  </div>
  
  <div class="content_main" style="background: #F4F4F4">
      <div class="main">
		       <div class="photo" id="photo">
		       </div>
		       <div class="desc"></div>
		       <div class="text" id="text_div">主题：晚秋，创作年份：1990年</div>
	  </div>
  </div>
<!--  <img src="http://img4.cache.netease.com/photo/0001/2013-04-08/8RVP16CB00AO0001.jpg" onload="ReSizePic(this);"> -->
 <!--   <img src="http://192.168.50.206/userfiles/1/IMG/1_1TH6GV9GX5U0P.jpg" onload="ReSizePic(this);"> -->
</div>
<div id="boxId" style="position: absolute;background: red;display:none;"><span style="color:#fff;">请稍候...</span></div>
</body>
</html>
<script type="text/javascript" src="/scripts/util.js"></script>
<script type="text/javascript" src="/scripts/xhr.js"></script>
<script type="text/javascript" src="/scripts/page.js"></script>
<script type="text/javascript" src="/system/config_js.shtml"></script>
<script type="text/javascript">
   var id='${id}';
   
   var WBPage =(function(){
	    var D=document;	
	    var atts={};
	    var sid="";
	    var photo;
	    var list=[];
	    var current=0;
	    
		return {
			init:function(id){
			  sid=id;
			  photo=util.$('photo');
		    },
		    loadPic:function(){
		    	function cb(d){
		    		util.close_dusk("boxId");
		    		list = eval('('+d+')');
		    		util.$('totle').innerHTML=(list.length);
		    		if(list.length==0){
		    			photo.innerHTML="<div style='padding:200px;color:red;'>暂无图片...</div>";
		    		}else{
   		                WBPage.play(0);
		    		}
		    	}
		    	new xhr('/art/search_art_pic.shtml',cb).setParameter('id',sid).execute();
		    	util.dusk_div("boxId");
		    },
		    play:function(n){
		    	if(n<list.length){
		    		current=n;
		    		var p=list[n];
		    		photo.innerHTML='<img src="'+Config['image.cache']+p.path+'" onload="ReSizePic(this);">';
		    		util.$('dijiz').value=(n+1);
		    		util.$('text_div').innerHTML='主题：'+p.name+'，创作年份：'+p.year+'年';
		    	}
		    },
		    next:function(){
		    	current++;
		    	(current>=list.length)&&(current=0);
		    	WBPage.play(current);
		    },
		    prew:function(){
		    	current--;
		    	(current<0)&&(current=0);
		    	WBPage.play(current);
		    },
		    last:function(){
		    	current=(list.length-1);
		    	(current<0)&&(current=0);
		    	WBPage.play(current);
		    }
		}
    })();
   WBPage.init(id);
   WBPage.loadPic();
   
   
   function ReSizePic(ThisPic){
	    var RePicWidth = 800; //这里修改为您想显示的宽度值
	
	    //============以下代码请勿修改==================================
	
	    var TrueWidth = ThisPic.width;    //图片实际宽度
	    var TrueHeight = ThisPic.height;  //图片实际高度
	    
	    var h=TrueHeight / ( TrueWidth / RePicWidth);
	    while(h>600){
	    	RePicWidth=(RePicWidth-20);
	    	h=TrueHeight / ( TrueWidth / RePicWidth);
	    }
	    
	   // var Multiple = TrueWidth / RePicWidth;  //图片缩小(放大)的倍数
	    ThisPic.width = RePicWidth;  //图片显示的可视宽度
	    
	    (h>600)&&(h=600)
	    ThisPic.height = h;  //图片显示的可视高度
	    if(h<600){
	    	ThisPic.style.margin= ((600-h)/2)+'px 0';
	    }
    }
   function shipei(w,tw,wh){
	   
   }
   
</script>